<template>
  <div class="login-wrap">
    <div class="login-content">
      <div class="content-top-wrap">
        <div class="top-left-wrap">
          <h4 class="title">欢迎回来, 请登录！</h4>
          <p class="title-desc">Product Data Management</p>
        </div>
        <div class="top-right-wrap">

        </div>
      </div>
      <div class="content-form-wrap">
        <div class="logo-wrap">
          <img
            class="logo-img"
            src="../assets/images/login-top-img-circle.svg"
            alt=""
          >
        </div>
        <!-- form -->
        <i class="iconfont icon-icon_user_black" />
        <el-form
          ref="loginForm"
          class="login-form"
          :model="loginForm"
          :rules="loginRules"
          label-position="left"
        >
          <el-form-item
            label="用户名"
            prop="loginName"
          >
            <el-input
              v-model="loginForm.loginName"
              type="text"
              auto-complete="off"
              placeholder="用户名"
              maxlength="20"
            >
              <i
                slot="suffix"
                class="iconfont iconicon_user_black"
              />
            </el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="loginForm.password"
              :type="isVisible?'text':'password'"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            >
              <i
                slot="suffix"
                class="iconfont"
                :class="isVisible?'iconchakan':'iconmimabukejian'"
                @click.stop="viewPwd"
              />
            </el-input>
          </el-form-item>
          <el-checkbox
            v-model="loginForm.rememberMe"
            class="mb16"
          >记住用户名</el-checkbox>
          <el-form-item>
            <el-button
              class="btn-width-long"
              :loading="loading"
              size="medium"
              type="primary"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 忘记密码 -->
        <p class="forget-pwd">
          <i class="iconfont iconicon_forget1" />
          <router-link :to="{path:'/forgetPwd'}">忘记密码？</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Config from '@/settings'
import Storage from '@/utils/storage'
var storage = new Storage()
var time = Config.passCookieExpires * 60 * 60 * 1000 * 24
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        loginName: '',
        password: '',
        rememberMe: false,
        uuid: ''
      },
      loginRules: {
        loginName: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
      },
      loading: false,
      redirect: undefined,
      isVisible: false // false-不可见  true-可见
    }
  },
  watch: {
    /* $route: {
       handler(route){
       this.redirect = route.query && route.query.redirect
       },
       immediate: true
       }*/
  },
  created() {
    this.getLoginInfo()
  },
  methods: {
    getLoginInfo() {
      const rememberMe = storage.get('rememberMe') || ''
      const loginName = storage.get('loginName') || ''
      const password = storage.get('password') || ''
      if (rememberMe) {
        this.loginForm = {
          loginName: loginName,
          password: password,
          rememberMe: rememberMe
        }
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const sysUser = {
          loginName: this.loginForm.loginName,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe
        }
        if (valid) {
          this.loading = true
          const userArr = ['loginName', 'password', 'rememberMe']
          if (sysUser.rememberMe) {
            userArr.forEach(el => storage.set(el, sysUser[el], time))
          } else {
            userArr.forEach(el => storage.remove(el))
          }
          this.$store
            .dispatch('Login', sysUser)
            .then(() => {
              this.loading = false
              this.$router.push({ path: '/main/home' })
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    viewPwd() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
@import "../assets/styles/variables";
@import "../assets/styles/mixin";
@import "../assets/styles/login";

.login-wrap {
  @include clearfix;
  background: $background;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-content {
    /*       position: absolute;
      left: 50%;
      top: 50%;
      margin: -262px 0 0 -225px; */
    position: relative;
    flex:1;
    max-width: 450px;
    height: 100%;
    @media (min-width:576px) {
      height: 484px;
    }
    .content-top-wrap {
      padding:20px 9px 24px 20px;
      height: 112px;
      background: #d4dbf9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      @include flex(space-between, flex-start, row);
      .top-left-wrap {
        color: $rimary;
        .title {
          margin-bottom: 7px;
          font-size: 16px;
          font-weight: bold;
        }
        .title-desc {
          font-size: 13px;
        }
      }
      .top-right-wrap {
        background: url("~@/assets/images/login-top-img.png");
        background-size: 100% 100%;
        width: 132+18px;
        height: 154px;
        margin-top: -20px;
        margin-right: -10px;
        // img {
        //   width: 100%;
        // }
      }
    }
    .content-form-wrap {
      background: $white;
      padding: 70px 32px 20px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      .logo-wrap {
        position: absolute;
        top: 86px;
        left: 24px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: #eff2f7;
        @include flex(center, center, row);
        .logo-img {
          width: 38px;
        }
      }
      .login-form {
        ::v-deep .el-input {
          position: relative;
          height: 32px;
          .el-input__inner {
            padding: 0 30px 0 13px !important;
            height: 32px;
            line-height: 32px;
          }
        }
        ::v-deep .el-button--primary {
          height: 36px !important;
          background: $btnColor;
          background-color: $btnColor;
        }
        ::v-deep
          .el-form-item.is-required:not(.is-no-asterisk)
          > .el-form-item__label:before {
          content: "";
        }
        ::v-deep .el-input__suffix {
          right: 13px;
        }
        .mt8 {
          margin-top: 8px;
        }
      }
      .forget-pwd {
        margin-top: 18px;
        text-align: center;
        color: $grayFontColor;
        font-size: 13px;
        margin-bottom: 0;
        .iconfont {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
